<template>
  <div>
    <!-- 标题栏 -->
    <div class="header">
      <span />
      <span>新闻</span>
      <span />
    </div>
    <channel />
    <div ref="container" class="nav-content">
      <!-- 在新闻列表中引入无限滚动加载功能 -->
      <div v-if="loading == false" ref="scroll" v-infinite-scroll="load" class="news-list">
        <div
          v-for="(item, index) in newData"
          :key="index"
          class="section"
          @click="toNews(index)"
        >
          <div class="news">
            <div class="news-left">
              <img :src="item.pic" alt="">
            </div>
            <div class="news-right">
              <div class="newsTitle">{{ item.title }}</div>
              <div class="newsMessage">
                <span>{{ item.time }}</span>
                <span>{{ item.src }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 在底部放入加载条 -->
        <div class="loading-more">正在努力加载</div>
      </div>
      <el-main
        v-else
        v-loading="loading"
        class="load"
        element-loading-background="rgba(0,0,0,0)"
        element-loading-text="正在加载中"
      />
    </div>
  </div>
</template>

<script>
import Channel from './channel'
import { getNewList } from '@/api/news'
export default {
  name: 'Home',
  components: { Channel },
  beforeRouteLeave(to, from, next) {
    this.scroll = this.$refs.scroll.scrollTop
    next()
  },
  data() {
    return {
      scrollTop: 0
    }
  },
  computed: {
    newData() {
      return this.$store.state.news.newsData
    },
    loading() {
      return this.$store.state.news.loading
    }
  },
  activated() {
    this.$refs.scroll.scrollTop = this.scroll
  },
  methods: {
    load() {
      // 如果状态管理器中的新闻列表是空的，说明刚初始化数据，不需要判断是否到达底部
      if (this.newData.length === 0) {
        return
      }
      // 获取下一页新闻
      console.log('已到达底部，自动触发加载方法')
      let start = this.$store.state.news.start
      start++
      if (start < 400) {
        this.getNews(this.$store.state.news.channel, start, this.$store.state.news.num).then(res => {
          console.log('加载下一页新闻列表', res)
          if (res && res.data.result) {
            const newsData = this.$store.state.news.newsData
            newsData.push.apply(newsData, res.data.result.list)
            this.$store.commit('SET_NEWS', newsData)
            this.$store.commit('SET_START', start)
          }
        })
      }
    },
    // 异步获取新闻
    async getNews(channel, start, num) {
      const data = await getNewList(channel, start, num)
      return data
    },
    // 打开新闻阅读
    toNews(index) {
      // 存储浏览历史
      this.$store.commit('SET_HISTROY', this.newData[index])
      // 打开明细
      this.$store.commit('SET_NEWS_INDEX', index)
      this.$router.push('/news')
    }
  }

}
</script>

<style lang="scss"  scoped>
.header {
  width: 100%;
  height: 1.2rem;
  background-color: #d43d3d;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  z-index: 99;
  position: fixed;
  top: 0;
  img {
    width: 0.67rem;
    height: 0.67rem;
    cursor: pointer;
  }
}

.nav-content {
  margin-top: 2.4rem;
}

.news-list {
  position: relative;
  height:calc(100vh - 2.4rem - 49px);
  overflow-y:auto;
  width: 100%;
}

.section {
  width: 100%;
  height: 2.5rem;
  border-bottom: 1px solid #ccc;
}

.news {
  height: 2.25rem;
  box-sizing: border-box;
  margin: 10px 10px;
  display: flex;
}
.news-left {
  height: 100%;
  width: 2.8rem;
  display: inline-block;
}
.news-left img {
  width: 100%;
  height: 100%;
}
.news-right {
  flex: 1;
  padding-left: 10px;
}
.newsTitle {
  width: 100%;
  height: 62%;
  color: #404040;
  font-size: 17px;
  overflow: hidden;
}
.newsMessage {
  width: 100%;
  height: 38%;
  display: flex;
  align-items: flex-end;
  color: #888;
  justify-content: space-between;
}
.load {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
 .loading-more {
  margin-top: 5px;
  width: 100%;
  height: 20px;
  text-align: center;
 }
</style>
